<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 200px; overflow-y: hidden;"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onChange="handleOnChange"
      @onCreated="handleCreated"
      @customPaste="handlePaste"
    />
  </div>
</template>

<script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { ClipboardEvent, IDomEditor, Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { WordPasterConf } from '/public/WordPaster/plugin/word'
import { PowerPointConf } from '/public/WordPaster/plugin/ppt'
import { PdfConf } from '/public/WordPaster/plugin/pdf'
import { ExcelImportConf } from '/public/WordPaster/plugin/excelimport'
import { WordImportConf } from '/public/WordPaster/plugin/wordimport'
import { NetImgConf } from '/public/WordPaster/plugin/net'
import { Boot, IEditorConfig, IToolbarConfig } from '@wangeditor/editor'
import { WordPaster } from '/public/WordPaster/js/w'
import { zyCapture } from '/public/zyCapture/z'
import { zyCaptureConf } from '/public/zyCapture/plugin/z'
import { zyOffice } from '/public/zyOffice/js/o'
import { ImportWordConf } from '/public/zyOffice/plugin/wordimp'
import { ExportWordConf } from '/public/zyOffice/plugin/wordexp'
import { ImportPdfConf } from '/public/zyOffice/plugin/pdfimp'
import formulaModule from '@wangeditor/plugin-formula'
import '/public/zyCapture/z.css'
import '/public/WordPaster/css/w.css'
import '/public/layer-v3.1.1/layer/layer'
import '/public/layer-v3.1.1/layer/theme/default/layer.css'

const wmodule = {
  // JS 语法
  menus: [zyCaptureConf, WordPasterConf, NetImgConf, WordImportConf, ExcelImportConf, PowerPointConf, PdfConf,ImportWordConf, ExportWordConf, ImportPdfConf]
}
Boot.registerModule(wmodule)
Boot.registerModule(formulaModule)

export default {
  components: { Editor, Toolbar },
  setup() {
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()

    // 内容 HTML
    const valueHtml = ref('<p>泽优全平台内容发布解决方案 for vue3 cli wangEditor5</p><p>泽优全平台Word一键粘贴控件（WordPaster）</p><p>泽优全平台截屏控件（zyCapture）</p><p>泽优Office文档转换服务（zyOffice）</p>')

    onMounted(() => {
      WordPaster.getInstance({
        // 上传接口：http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203ed
        PostUrl: 'http://localhost:811/wordpaster/ueditor1.4x/php/upload.php',
        License2: '',
        // 为图片地址增加域名：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936
        ImageUrl: '',
        // 设置文件字段名称：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45
        FileFieldName: 'file',
        // 提取图片地址：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1
        ImageMatch: ''
      })
    })

    zyCapture.getInstance({
      config: {
        PostUrl: "http://localhost:8891/upload.aspx",
        License2: '',
        FileFieldName: "file",
        Fields: { uname: "test" },
        ImageUrl: 'http://localhost:8891{url}'
      }
    })

    // zyoffice，
    // 使用前请在服务端部署zyoffice，
    // http://www.ncmem.com/doc/view.aspx?id=82170058de824b5c86e2e666e5be319c
    zyOffice.getInstance({
        word: 'http://localhost:13710/zyoffice/word/convert',
        wordExport: 'http://localhost:13710/zyoffice/word/export',
        pdf: 'http://localhost:13710/zyoffice/pdf/upload'
    })

    const toolbarConfig = {
      insertKeys: {
          index: 0,
          keys: ['insertFormula', 'editFormula', 'zycapture', 'wordpaster', 'netimg', 'wordimport', 'excelimport', 'pptimport', 'pdfimport', 'importword', 'exportword', 'importpdf']
        }      
    }
    const editorConfig = { placeholder: '请输入内容...' }

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
        const editor = editorRef.value
        if (editor == null) return
        editor.destroy()
    })

    const handleCreated = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }

    const handleOnChange = (e) => {
    }

    const handlePaste = (editor,event) => {
      WordPaster.getInstance().SetEditor(editor);
      WordPaster.getInstance().Paste();
      event.preventDefault()
      return false
    }

    return {
      editorRef,
      valueHtml,
      mode: 'default', // 或 'simple'
      toolbarConfig,
      editorConfig,
      handleCreated,
      handleOnChange,
      handlePaste
    };
  }
}
</script>    

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
